import React from 'react';
import { renderRoutes } from "react-router-config";
import {
  Top,
  Tab,
  TabItem,
} from './style';
import { NavLink } from 'react-router-dom';//利用NavLink组件进行路由跳转

function Home(props){
  const { route } = props;
  const arrLink = [
    {toPath: "/recommend", title: "推荐"},
    {toPath: "/singers", title: "歌手"},
    {toPath: "/rank", title: "排行榜"},
  ]

  return (
    <div>
      <Top>
        <span className="iconfont menu">&#xe65c;</span>
        <span className="title">Web App</span>
        <span className="iconfont search">&#xe62b;</span>
      </Top>
      <Tab>
        {
          arrLink.map(item => (
            <NavLink key={item.toPath} to={item.toPath} activeClassName="selected">
              <TabItem>
                <span>{item.title}</span>
                </TabItem>
            </NavLink>
          ))
        }
      </Tab>
      { renderRoutes(route.routes) }
    </div>
  );
}
 
export default React.memo(Home);